<template>
	<view class="box">
		<view class="close">
			批量删除
		</view>
		<u-checkbox-group shape="circle" v-model="selecteds">
			<view class="li-box">
				<view class="li" v-for="(item,index) in car_list" :key="item.id">
					<view class="profile">
						资料
					</view>
					<image src="@/static/img/close.png" mode="" class=".close-img"></image>
					<view class="top">

						<view class="select">
							<u-checkbox v-model="cs" activeColor="#fb8b06" :name="item.id" size="30rpx"
								@change="changecheckbox(item)"></u-checkbox>
						</view>
						<image src="@/static/logo.png" class="img" mode=""></image>
						<view class="centent">
							<view class="title oneline-hide">
								{{item.goods_name}}
							</view>
							<view class="vtitle twoline-hide">
								{{item.spec_key_name}}
							</view>
							<view class="price">
								<view class="l" style="color: #FF0000;display: flex;align-items: center;">
									<view style="font-size: 26rpx;">
										￥
									</view>
									<view style="font-size: 34rpx;"> {{item.goods_price}} </view>
								</view>
								<view class="r">
									<view class="jian" @click="hdNum(false,item)">
										-
									</view>
									<view class="num">
										{{item.goods_num}}
									</view>
									<view class="jia" @click="hdNum(true,item)">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							!
						</view>
						<view class="txt">
							资料属于标准定制品，使用统一规格打印
						</view>
						<view class="details">
							查看详情
						</view>
					</view>
				</view>
			</view>

		</u-checkbox-group>
		<view class="push ">
			+
		</view>


		<view class="bottom-box">
			<view class="btn">
				<view class="all-select">
					<u-checkbox-group shape="circle" v-model="allpriceAll">
						<u-checkbox activeColor="#fb8b06" labelSize="32rpx" size="43rpx" label="全选"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="pic">
					<view class="t">
						<view class="" style="font-size: 30rpx;">
							总计：
						</view>
						<view class="" style="font-size: 30rpx; color: #FF0000;">
							￥
						</view>
						<view class="" style="font-size: 38rpx; color: #FF0000;">
							{{allprice}}
						</view>
					</view>
					<view class="b" style="font-size: 24rpx;">
						包邮
					</view>
				</view>
				<view class="account">
					结算(3)
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		StudyApi
	} from '@/api';
	export default {
		data() {
			return {
				value: true,
				num: 1,
				car_list: [],
				allprice: 0,
				selecteds: [],
				cs: true
			};
		},
		onLoad() {
			this.carlistFn()
		},
		computed:{
			allpriceAll(){
				return [!this.selecteds.includes(false)]
			}
		},
		methods: {
			// 获取待打印列表
			async carlistFn() {
				try {
					const carlist = await StudyApi.CartAllList()
					this.car_list = carlist.result
					this.allprice = carlist.allprice
					this.car_list.forEach(item => {
						if (item.selected === 1) {
							this.selecteds.push(item.id)
						}
					})
				} catch (e) {
					//TODO handle the exception
				}


			},

			hdNum(bol, item) {
				if (bol) {
					item.goods_num += 1
					this.changecheckbox(item)
					return false
				}

				if (item.goods_num === 1)
					return false
				item.goods_num -= 1
				this.changecheckbox(item)
			},
			async changecheckbox(item) {
				try {
					console.log(item.selected);
					
					const res = await StudyApi.CartChangeInfo({
						user_id: item.user_id,
						rec_id: item.id,
						is_select:item.selected === 1 ? 0 : 1,
						goods_number: item.goods_num
					})
					// this.$showToast(res.msg)
					if (res.status === 1) {
						this.allprice = res.allprice
						this.carlistFn()
					}

				} catch (e) {
					// this.$showToast(e.msg)

				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		box-sizing: border-box;

		.bottom-box {
			width: 100%;
			position: fixed;
			right: 0rpx;
			bottom: 0rpx;
			background-color: #fff;
			padding-bottom: $safe-btm-env;
			box-sizing: border-box;

			.pic {
				flex: 1;
				margin-right: 26rpx;

				.t {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.b {
					text-align: right;
				}
			}

			.btn {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 30rpx;
				padding-bottom: 0;

				.account {
					width: 271rpx;
					height: 98rpx;
					border-radius: 15rpx;
					opacity: 1;
					background: #fd8907;
					color: #ffffff;
					text-align: center;
					font-size: 34rpx;
					font-weight: 400;
					font-family: "Source Han Sans";
					line-height: 98rpx;
				}
			}
		}

		.push {
			position: fixed;
			right: 20rpx;
			bottom: 200rpx;
			width: 87rpx;
			height: 87rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 87rpx;
			color: #fff;
			font-size: 54rpx;
			background-color: #fb8b07;

		}

		.li-box {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			overflow-y: auto;
			height: calc(100vh - 270rpx);

			.li {
				width: 690rpx;
				height: 355rpx;
				border-radius: 20rpx;
				opacity: 1;
				box-sizing: border-box;
				background: #ffffff;
				padding: 21rpx;
				margin-top: 30rpx;
				position: relative;

				.profile {
					position: absolute;
					left: 0;
					top: 0;
					width: 71rpx;
					height: 39rpx;
					border-radius: 20rpx 0 20rpx 0;
					opacity: 1;
					background: #fb8b07;
					color: #ffffff;
					text-align: center;
					line-height: 39rpx;
					font-size: 20rpx;
					font-weight: 400;
					font-family: "Source Han Sans";
				}

				.close-img {
					position: absolute;
					right: -17rpx;
					top: -17rpx;
					width: 34rpx;
					height: 34rpx;
				}

				.top {
					display: flex;
					align-items: center;

					.select {
						flex: 1;
					}

					.img {
						width: 139rpx;
						height: 189rpx;
						opacity: 1;
					}

					.centent {
						flex: 1;
						margin-left: 14rpx;

						.title {
							text-align: left;
							font-size: 30rpx;
							font-weight: 400;
							font-family: "Source Han Sans";
						}

						.vtitle {
							width: 428rpx;
							height: 94rpx;
							margin-bottom: 10rpx;
							opacity: 1;
							color: #b2b2b2;
							text-align: left;
							font-size: 26rpx;
							font-weight: 400;
							font-family: "Source Han Sans";
						}

						.price {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.r {
								display: flex;
								align-items: center;

								.jian {
									width: 37rpx;
									height: 37rpx;
									opacity: 1;
									background: #efefef;
									text-align: center;
									line-height: 37rpx;
									border-radius: 50%;
									font-size: 34rpx;
									font-weight: 400;
									font-family: "Source Han Sans";
								}

								.num {
									width: 87rpx;
									height: 37rpx;
									line-height: 37rpx;
									text-align: center;
									font-size: 28rpx;
									font-weight: 400;
									font-family: "Source Han Sans";
								}

								.jia {
									width: 37rpx;
									height: 37rpx;
									opacity: 1;
									border-radius: 50%;
									background: #fb8b07;
									font-size: 34rpx;
									text-align: center;
									line-height: 34rpx;
									font-weight: 400;
									font-family: "Source Han Sans";
									color: #fff;
								}
							}
						}
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					margin-top: 75rpx;

					.left {
						width: 29rpx;
						height: 29rpx;
						opacity: 1;
						border: 1rpx solid #d8d8d8;
						background: #efefef;
						box-sizing: border-box;
						text-align: center;
						line-height: 29rpx;
						font-size: 24rpx;
						border-radius: 50%;

					}

					.txt {
						color: #9e9e9e;
						margin-left: 4rpx;
						font-size: 22rpx;
						font-weight: 400;
						font-family: "Source Han Sans";
					}

					.details {
						width: 189rpx;
						height: 64rpx;
						border-radius: 10rpx;
						margin-left: 22rpx;
						opacity: 1;
						border: 1rpx solid #d8d8d8;
						background: #fb8b07;
						box-sizing: border-box;
						color: #ffffff;
						text-align: center;
						line-height: 64rpx;
						font-size: 28rpx;
						font-weight: 400;
						font-family: "Source Han Sans";
					}
				}

			}
		}

		.close {
			width: 100vw;
			height: 80rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			text-align: right;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			font-family: "Source Han Sans";
			color: #fd8907;
			background-color: #fef2e6;
		}
	}
</style>